/*
 * @Autor: lingchen.liu
 * @Date: 2022-02-09 10:49:58
 * @LastEditors: lingchen.liu
 * @LastEditTime: 2022-02-11 10:27:11
 * @emial: lingchen.liu@bizfocus.cn
 */

import React, { FC, ReactElement } from 'react';
import './index.scss'
import { ITodo } from '../../types/index'

interface ITodoItem {
    dataItem: ITodo;
    completeItem: (id: number) => void;
    openCheckModal: (id: number) => void;
    openEditModal: (id: number) => void;
    removeItem: (id: number) => void;
}
const TodoItem: FC<ITodoItem> = ({ dataItem, completeItem, openCheckModal, openEditModal, removeItem }): ReactElement => {

    const { id, content, completed } = dataItem;
    return (
        <li className='todo-item'>
            <div className='check-box'>
                <input
                    type="checkbox"
                    checked={completed}
                    onChange={() => completeItem(id)}
                />
            </div>
            <span
                className='content'
                style={{ 'textDecoration': completed ? 'line-through' : 'none' }}
            >
                {content}
            </span>
            <div className='btn-group'>
                <button className='btn btn-promary' onClick={() => openCheckModal(id)}>查看</button>
                <button className='btn btn-warning' onClick={() => openEditModal(id)}>编辑</button>
                <button className='btn btn-danger' onClick={() => removeItem(id)}>删除</button>
            </div>
        </li>
    )
}

export default TodoItem